<template>
    <div>
        <el-card>
            <el-page-header icon="" content="产品列表" title="产品管理"></el-page-header>

            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="title" label="产品名称" />

                <el-table-column prop="introduction" label="简要描述" />

                <el-table-column label="更新时间">
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button circle :icon="Edit" @click="handleEdit(scope.row)"></el-button>

                        <el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button circle :icon="Delete" type="danger"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

    </div>
</template>

<script setup>
import formatTime from '@/util/formatTime';
import { Edit, Delete } from '@element-plus/icons-vue'
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()
const tableData = ref([])

onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get('/adminapi/product/list')
    // console.log(res.data.data)

    tableData.value = res.data.data
}



const handleDelete = async (data) => {
    await axios.delete(`/adminapi/product/list/${data._id}`)
    getTableData()
}

const handleEdit = (data)=>{ 
    router.push(`/product-manage/editproduct/${data._id}`)
}
</script>


<style lang="scss" scoped>
.el-table {
    margin-top: 50px;
}

::v-deep .htmlcontent {
    img {
        max-width: 95%;
    }
}
</style>